<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:64.67%">
      <div style="width:24.18%">
        <div data-bottom class="three-sides" style="width:100%;height:48.35%">1</div>
        <div style="height:3.3%" />
        <div data-bottom class="three-sides" style="width:100%;height:48.35%">2</div>
      </div>
      <div data-top class="three-center">2</div>
    </div>
    <div style="height:2.14%" />
    <div data-bottom class="flex justify-between" style="height:31.29%">
      <div data-bottom class="three-sides">
        <v-chart v-if="isShow" :options="polar" />
      </div>
      <div data-bottom class="three-sides">3</div>
      <div data-bottom class="three-sides">1</div>
      <div data-bottom class="three-sides">3</div>
    </div>
  </div>
</template>

<script>
import { test } from '@/api/test'
export default {
  name: 'SecondLevel',
  data() {
    return {
      isShow: false,
      polar: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: []
      }
    }
  },
  created() {
    this.test()
  },
  methods: {
    test() {
      test()
        .then(res => {
          this.polar.xAxis = res.body.data.xAxis
          this.polar.series = res.body.data.series
          this.isShow = true
        })
        .catch(err => {
          //console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.three-center {
  width: 74.73%;
  height: 100%;
  background-size: 100% 100% !important;
}
.three-sides {
  width: 24.18%;
  height: 100%;
  background-size: 100% 100% !important;
}
.three-center[data-top] {
  background: url(~@/assets/img/currency-box.png) no-repeat;
}
.three-center[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
}
.three-sides[data-top] {
  background: url(~@/assets/img/currency-box.png) no-repeat;
}
.three-sides[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
}
</style>
